<template>
  <div>
    <a-modal v-model="visible" title="设置前端选项" @ok="handleOk">
      <div class="tac">
        <div class="mb10" v-for="(opt,index) in list" :key="`opt${index}`">
          <a-input v-model="opt.value" class="w100 mr10"></a-input>
          <a-input v-model="opt.label" class="w160 mr10"></a-input>
          <div class="btn-circle" @click="delOpt(opt)">
            <i class="fa fa-trash"></i>
          </div>
          <div class="btn-circle" @click="addOpt(opt)">
            <i class="fa fa-plus"></i>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableName: '',
      columnName: '',
      visible: false,
      list: [{ value: '1', label: '选项1' }]
    }
  },
  mounted () {
  },
  methods: {
    show (col) {
      if (col.opts && col.opts.length > 0) {
        this.list = JSON.parse(col.opts)
        if (this.list.length === 0) {
          this.list.push({ value: '1', label: '选项1' })
        }
      }
      this.tableName = col.tableName
      this.columnName = col.columnName
      this.visible = true
    },
    hide () {
      this.visible = false
    },
    handleOk () {
      if (this.list.some(t => {
        return t.value.length === 0 || t.label.length === 0
      })) {
        this.$error({ title: '请设置所有选项的label和value' })
        return
      }
      this.$http.post('/zg-generator/config/column/property/set', {
        tableName: this.tableName,
        columnName: this.columnName,
        propertyName: 'opts',
        propertyValue: JSON.stringify(this.list)
      }, () => {
        this.$success({ title: '操作成功' })
        this.visible = false
      })
    },
    delOpt (opt) {
      if (this.list.length === 1) {
        this.$info({ title: '至少要有一个选项' })
        return
      }
      const index = this.list.indexOf(opt)
      this.list.splice(index, 1)
    },
    addOpt (opt) {
      const index = this.list.indexOf(opt)
      this.list.splice(index + 1, 0, { value: '', label: '' })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
